<template>
  <div class="mobile-dialog-demo">
    <el-button type="primary" @click="showDialog">打开弹窗（优化版）</el-button>

    <!-- 优化后的弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="优化后的折叠面板"
      width="90%"
      :append-to-body="true"
      :destroy-on-close="true"
      class="optimized-mobile-dialog"
    >
      <!-- 核心：独立的滚动容器 -->
      <div class="scroll-container">
        <el-collapse v-model="activeNames" accordion>
          <el-collapse-item
            v-for="item in 20"
            :key="item"
            :title="`折叠板 ${item}`"
            :name="item"
          >
            <div class="content-wrapper">
              <p v-for="n in 10" :key="n">
                这是第 {{ item }} 个折叠板的第 {{ n }} 行内容。
                滚动应该非常流畅，没有延迟。
              </p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)
const activeNames = ref([1])

const showDialog = () => {
  dialogVisible.value = true
}
</script>

<style scoped>
.mobile-dialog-demo {
  padding: 20px;
}

/* 关键优化：弹窗容器 */
.optimized-mobile-dialog :deep(.el-dialog) {
  /* 开启硬件加速 */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* 关键优化：弹窗主体 */
.optimized-mobile-dialog :deep(.el-dialog__body) {
  padding: 0;
  max-height: 60vh;
  overflow: hidden; /* 主体不滚动 */
}

/* 关键优化：滚动容器 - 这是核心！ */
.scroll-container {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;

  /* iOS 平滑滚动 - 非常重要！ */
  -webkit-overflow-scrolling: touch;

  /* GPU 硬件加速 - 非常重要！ */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;

  /* 优化渲染性能 */
  contain: layout style paint;

  padding: 20px;
}

/* 移除遮罩模糊效果 - 性能杀手 */
.optimized-mobile-dialog :deep(.el-overlay) {
  backdrop-filter: none !important;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 优化折叠面板 */
.optimized-mobile-dialog :deep(.el-collapse) {
  border: none;
}

.optimized-mobile-dialog :deep(.el-collapse-item) {
  /* 每个折叠项也开启硬件加速 */
  transform: translate3d(0, 0, 0);
  margin-bottom: 10px;
}

.optimized-mobile-dialog :deep(.el-collapse-item__header) {
  background-color: #f5f7fa;
  padding: 12px 15px;
  border-radius: 4px;
}

.optimized-mobile-dialog :deep(.el-collapse-item__wrap) {
  border: none;
}

.content-wrapper {
  padding: 15px;
  background-color: #fff;

  /* 内容区域也优化 */
  transform: translateZ(0);
}

.content-wrapper p {
  margin: 8px 0;
  line-height: 1.6;
  color: #606266;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .optimized-mobile-dialog :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto !important;
  }

  .scroll-container {
    max-height: 70vh;
  }
}
</style>
